<template>
  <div class="content">
    <Calendar
      ref="Calendar"
      :markDateMore="arr"
      :markDate="arr2"
      v-on:isToday="clickToday"
      agoDayHide="1530115221"
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
    ></Calendar>
    <br>
    <div class="div" @click="onJumpToToday">点击跳到今天</div>
  </div>
</template>

<script>
import Calendar from "./components/calendar.vue";
export default {
  data() {
    return {
      arr2: [],
      arr: [
        {
          date: "2018/8/1",
          className: "mark1",
        },
        {
          date: "2018/8/13",
          className: "mark2",
        },
      ],
    };
  },
  components: {
    Calendar,
  },
  methods: {
    clickDay(data) {
      console.log("选中了", data); //选中某天
    },
    clickToday(data) {
      console.log("跳到了本月今天", data); //跳到了本月
    },
    changeDate(data) {
      console.log("左右点击切换月份", data); //左右点击切换月份
    },
    onJumpToToday() {
      const today = this.getCurrentTime()
      this.$refs.Calendar.ChoseMonth(today); //跳到12月12日选中12月12日
    },
    getCurrentTime() {
      var date = new Date(); //当前时间
      var month = this.zeroFill(date.getMonth() + 1); //月
      var day = this.zeroFill(date.getDate()); //日
      var hour = this.zeroFill(date.getHours()); //时
      var minute = this.zeroFill(date.getMinutes()); //分
      var second = this.zeroFill(date.getSeconds()); //秒

      //当前时间
      var curTime =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;

      return curTime;
    },

    /**
     * 补零
     */
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
  },
  created() {
    function format(date, index) {
      date = new Date(date);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${index}`;
    }
    setTimeout(() => {
      this.arr = [
        {
          date: format(new Date(), 3),
          className: "mark1",
        },
        {
          date: format(new Date(), 12),
          className: "mark2",
        },
      ];
      this.arr.push({
        date: format(new Date(), 15),
        className: "mark1",
      });
    }, 300);
  },
};
</script>

<style scoped>
h3 {
  text-align: center;
  width: 90%;
  margin: auto;
}

.div {
  margin: auto;
  width: 220px;
  height: 44px;
  line-height: 44px;
  background: #0fc37c;
  color: #fff;
  font-size: 17px;
  text-align: center;
  margin-top: 20px;
}

.wh_container >>> .mark1 {
  background-color: orange;
}

.wh_container >>> .mark2 {
  background-color: blue;
}
.wh_content_item > .wh_isMark {
  background: orange;
}
.wh_container >>> .wh_content_all {
  /* background-color: red; */
}
</style>
